<template>
  <div>
    <el-dialog
      :visible.sync="showPho"
      width="400px"
      top="20vh"
      :append-to-body="true"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div slot="title" class="title_close">
        <!-- 更换手机号/忘记交易密码 -->
        <div class="title">{{ title }}</div>
        <img
          src="@/assets/img/icon_gb1.png"
          class="close"
          @click="hideSetPass(false)"
        />
      </div>
      <!-- 输入验证码 -->
      <div class="phone_captcha">
        <h2>{{ $t("m.inputCode") }}</h2>
        <p>{{ `${$t('inccom.message_dialog.56hyspk4cgk0')} ${countryCode}` }} {{ account | mobile }}</p>

        <div class="f-cb code mar">
          <input
            type="text"
            v-model="captcha"
            :placeholder="$t('m.inputCode')"
            class="input_code"
          />
          <input
            type="button"
            v-model="name"
            :disabled="disabled"
            class="send_code"
            @click="sends"
          />
        </div>
        <button @click="checkCode" class="submit">
          {{ $t("m.determine") }}
        </button>
      </div>
      <!-- 更换手机号对话框 -->
      <CaptchaDia
        :isloginPass="loginPass"
        :showCap="captchaShow"
        @closeCapDia="closeCapDia"
      ></CaptchaDia>
      <!-- 修改交易密码对话框 -->
      <BussPassword
        :isResetPass="isResetPass"
        :showBussPass="showBussPass"
        @closeBussPassDia="closeBussPassDia">
      </BussPassword>
    </el-dialog>
  </div>
</template>

<script>
import CaptchaDia from "./CaptchaDialog";
import BussPassword from "./BussPassword";
import {get_sms_send, get_sms_check} from '@/assets/js/API/system.js'
export default {
  components: {
    CaptchaDia,
    BussPassword
  },
  props: {
    showPho: Boolean,
    title: String,
    isForgetTraPwd: Boolean, // 判断是否是忘记交易密码事件
  },
  data() {
    return {
      name: this.$i18n.t("m.ObtainCode"),
      disabled: false,
      auth_time: 60,
      auth_timetimer: null,
      captcha: "",
      loginPass: 2, // 更换手机号
      captchaShow: false, // 发送验证码对话框
      showBussPass: false, // 设置交易密码对话框
      isResetPass: true, // 重置密码
      event: "", // 发送事件
    };
  },
  created() {},
  mounted() {
  },
  beforeDestroy() {
    clearInterval(this.auth_timetimer);　　// 清除定时器
    this.auth_time = 60;
  },
  computed: {
    account() {
      return this.$store.state.index.account;
    },
    countryCode() {
      return this.$store.state.index.countryCode;
    },
  },
  filters: {
    mobile(value) {
      if (!value) {
        return "***********";
      }
      let start = value.slice(0, 3);
      let end = value.slice(-4);
      return `${start}****${end}`;
    },
  },
  methods: {
    hideSetPass(flag) {
      this.captcha = "";
      this.$emit("closePhone");
    },
    // 关闭修改登录密码对话框
    closeCapDia() {
      this.captchaShow = false;
    },
    // 关闭修改交易密码对话框
    closeBussPassDia() {
      this.showBussPass = false;
    },
    // 点击发送验证码延迟
    codeClick() {
      this.disabled = true;
      this.auth_timetimer = setInterval(() => {
        this.auth_time--;
        this.name = this.auth_time + this.$i18n.t("m.result");
        if (this.auth_time <= 0) {
          this.disabled = false;
          this.name = this.$i18n.t("m.ObtainCode");
          clearInterval(this.auth_timetimer);
          this.auth_time = 60;
        }
      }, 1000);
    },
    // 发送验证码请求
    async sends() {
      if(this.isForgetTraPwd) this.event = "forgetpwd";
      else this.event = "bindmobile"
      const res = await get_sms_send({
          mobile: this.account,
          event: this.event,
          countryCode: this.countryCode,
        }) 
      if (res.code != 1) return this.$message.error(res.msg);
      this.codeClick();
      return this.$message.success(res.msg);
    },
    // 检验验证码是否正确，并跳转到修改手机号
    async checkCode() {
      if(this.captcha == "") return this.$message.error(this.$i18n.t("m.inputCode"));
      const res = await get_sms_check({
          mobile: this.account,
          captcha: this.captcha,
          countryCode: this.countryCode,
          event: this.event,
        });
      if (res.code != 1) return this.$message.error(res.msg);
      this.hideSetPass(true)
      if(this.isForgetTraPwd) {
        this.showBussPass = true;
        } else {
        this.captchaShow = true;
      }
    },
  },
};
</script>
<style lang="less">
.phone_captcha {
  p {
    font-size: 12px;
    line-height: 12px;
    color: @fbSix;
    padding-bottom: 12px;
  }
  .mar {
    margin: 20px 0 10px 0;
  }
  .submit {
    width: 100%;
    background-color: @hoverColor;
    height: 40px;
    border-radius: 3px;
    border: 1px solid transparent;
    color: @fff;
    font-size: 12px;
    margin-top: 30px;
  }
}
</style>